<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">

      <!--表单组件-->
      <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="'媒体报单'" width="400px">
        <el-form ref="form" :model="form" :rules="rules"  size="small" label-width="80px">
          <el-form-item label="活动编号">
            <el-input v-model="form.activityId" style="width: 270px;" disabled />
          </el-form-item>
          <el-form-item label="剩余额度">
            <el-input v-model="form.shengyuEdu" style="width: 270px;" disabled />
          </el-form-item>
          <el-form-item label="订单号"  prop="orderNo" >
            <el-input v-model="form.orderNo" :rows="3"  placeholder="多个用逗号分割" type="textarea" style="width: 270px;" />
          </el-form-item>
          <el-form-item label="订单时间" v-show="detailsList.swtime === '1'" ref="swtime"  :prop="'orderTime'">
            <el-date-picker v-model="form.orderTime" type="datetime" style="width: 270px;" />
          </el-form-item>
          <el-form-item label="订单金额" v-show="detailsList.swamt === '1'"  ref="swamt"   :prop="'orderAmt'">
            <el-input v-model="form.orderAmt" style="width: 270px;" />
          </el-form-item>
          <el-form-item label="销售金额" v-show="detailsList.swshoujia === '1'"  ref="swshoujia"   :prop="'saleAmt'">
            <el-input v-model="form.saleAmt" style="width: 270px;" />
          </el-form-item>
          <el-form-item label="数量" v-show="detailsList.swcount === '1'"  ref="swcount"   :prop="'orderCount'">
            <el-input v-model="form.orderCount" style="width: 270px;" />
          </el-form-item>
          <el-form-item label="媒体编号">
            <el-input v-model="form.uid" style="width: 270px;" disabled />
          </el-form-item>
          <el-form-item label="快递单号" v-show="detailsList.swextra1 === '1'"  ref="swextra1"   :prop="'kddh'">
            <el-input v-model="form.kddh" style="width: 270px;" />
          </el-form-item>
          <el-form-item label="微信号" v-show="detailsList.swuname === '1'"  ref="swuname"   :prop="'orderUname'">
            <el-input v-model="form.orderUname" style="width: 270px;" />
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="form.extra1" style="width: 270px;" />
          </el-form-item>
         <!-- <el-form-item label="返利方式">
            <el-select v-model="form.payType" filterable placeholder="请选择">
              <el-option v-for="item in dict.pay_type"
                :key="item.id"
                :label="item.label"
                :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="支付账号">
            <el-input v-model="form.payNo" style="width: 270px;" />
          </el-form-item>   -->
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
        </div>
      </el-dialog>


        <!-- header start -->
        <div class="content-body">
          <div id="basic-horizontal-layouts">
            <div class="clum-row match-height">
              <div class="clum-md-12 clum-12" style="padding-right: 0px !important;">
                <div class="card">
                   <div class="clum-md-10 clum-12">
                     <div class="card-content">
                       <div class="card-body" style="padding:0px;">
                          <div class="clum-row">
                            <div class="clum-md-3" style="margin-top: 20px;">
                              <img class="card-img-top img-fluid" :src="require('../img/'+detailsList.plat+'.jpg')" style="height: 240px;">
                            </div>
                            <div class="clum-md-9 form-group">
                              <div class="position-relative has-icon-left">
                                <div class="card-header pb-50">
                                  <h4 style="font-family: 黑体;line-height: 20px;margin-top: 18px;">{{detailsList.activityName}}</h4>
                                </div>
                                  <hr>
                                  <table class="table table-borderless" style="margin-left: 24px;">
                                      <tbody>
                                      <tr class="tdtr" style="width: 100%;height:25px">
                                        <td style=" padding: 0px 0px !important;">活动名称标题:</td>
                                        <td style=" padding: 0px 0px !important;" class="users-view-name"> {{detailsList.activityName}} </td>
                                      </tr>
                                      <tr class="tdtr" style="width: 100%;height:25px">
                                          <td style=" padding: 0px 0px !important;">返利情况:</td>
                                          <td style=" padding: 0px 0px !important;" class="users-view-name"> {{detailsList.atype}} </td>
                                      </tr>
                                      <tr class="tdtr" style="width: 100%;height:25px">
                                          <td style=" padding: 0px 0px !important;">剩余额度（分）:</td>
                                          <td style=" padding: 0px 0px !important;" class="users-view-email">{{detailsList.shengyuEdu}}</td>
                                      </tr>
                                      <tr class="tdtr" style="width: 100%;height:25px">
                                          <td style=" padding: 0px 0px !important;">结算周期:</td>
                                          <td style=" padding: 0px 0px !important;">{{detailsList.zhouqi}}</td>
                                      </tr>
                                      <tr class="tdtr" style="width: 100%;height:25px">
                                          <td style=" padding: 0px 0px !important;">活动日期:</td>
                                          <td>{{detailsList.startTime}} &nbsp;&nbsp; 至 &nbsp;&nbsp; {{detailsList.endTime}}</td>
                                      </tr>
                                      </tbody>
                                  </table>
                                  <a class="mb-1" style="margin-left: 26px;"> 简介</a>
                                  <div style="margin-top: 3px;margin-bottom: 5px;margin-left: 26px;">{{detailsList.jianjie}}</div>
                              </div>
                            </div>
                            <div class="clum-12 d-flex justify-content-end">
                              <button type="button" class="btn btn-primary glow mr-1 mb-1" style="padding: 0.4rem 1rem;" @click="goSubment(detailsList)">报单</button>
                              <button type="button" class="btn btn-primary glow mr-1 mb-1" style="padding: 0.4rem 1rem;" @click="addorderUrl(detailsList)">复制报单链接</button>
                              <!-- <button type="button" class="btn btn-primary glow mr-1 mb-1" style="padding: 0.4rem 1rem;" @click="goOPen(qrUrl)">跳转链接</button>  -->
                           </div>
                         </div>
                      </div>
                    </div>
                  </div>
               </div>
             </div>
           </div>
         </div>
       </div>
     <!-- qr start -->
      <div class="bg-variants">
        <div class="card" v-for="(item,index) in ulist" :key="index">
          <div class="clum-row" style="margin-right: 0 !important;">
            <div class="clum-xl-12 clum-sm-12 clum-12">
              <div class="card-content">
                <div class="clum-row no-gutters">
                  <div class="clum-md-12 clum-lg-1" style="text-align: center;padding: 1.7rem;">
                    <div :id="'qrcode'+index"></div>
                  </div>
                  <div class="clum-md-12 clum-lg-11" style="padding-left: 80px;">
                    <div class="card-body">
                      <div class="clum-12 mt-3 mb-1">
                        <h4 class="text-uppercase" style="margin-left: -17px;">名称：{{item.shuoming}}</h4>
                      </div>
                      {{item.hideUrl}}
                      <p class="card-text text-ellipsis" style="display: block;font-size: 10px;">
                        您可以在连接后添加用户自定义标签用来区分订单的来源。添加的标签可以在订单列表中查看和搜索到。<br>
                      </p>
                      <div class="clum-12 d-flex">
                        <button type="button" style="margin-right: 5px;" class="btn btn-primary mb-1" @click="goOPen(item.hideUrl)">打开链接</button>
                        <button type="reset" class="btn btn-light-secondary mb-1" @click="copyUrl(item.hideUrl)">复制链接</button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
        <!-- tip start -->
        <div class="card" style="border-top: 1px solid whitesmoke;">
          <div class="clum-12">
            <div class="global-settings" style="padding-top: 5px;">
                <div class="card-header">
                    <h4 style="font-family: 黑体;line-height: 14px;">活动说明</h4>
                </div>
                <hr>
                <div class="card-content">
                    <div class="card-body">
                        <div class="card-text">
                          <p><font color="#656565">{{detailsList.shuoming}}</font></p>
                        </div>
                    </div>
                </div>
            </div>
          </div>
        </div>
    </div>
  </div>





</template>

<script>
import crudActivity from '@/api/activity/activityDetails'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
import QRCode from 'qrcodejs2'
import Vue from 'vue'
import VueResource from 'vue-resource'
Vue.use(VueResource) ;

const defaultForm = { id: null, activityId: null, orderNo: null, orderType: null, orderDate: null, orderTime:  new Date(), orderAmt: null, saleAmt: null, orderStatus: null, uid: null, orderUname: null, phone: null, createTime: null, lastUpdateTime: null, payType: null, payNo: null, pipei: null, extra1: null, extra2: null }
export default {
  name: 'activityDetails',
  components: { pagination, crudOperation, rrOperation, udOperation, VueResource },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  dicts: ['pay_type', 'yn', 'ftype'],
  cruds() {
    return CRUD({ title: 'activity', url: 'api/activity', idField: 'id',query:{id:window.location.href.split('?')[1].split('=')[1]}, sort: 'id,desc', crudMethod: { ...crudActivity }})
  },
  data() {
    return {
      uid:'',
      qrImg:null,
      qrUrl:'',
      detailsList:{},
      ulist:{},
      rules: {
        orderNo: [{ required: true, message: '订单编号不能为空', trigger: 'blur' }],
      },
      queryTypeOptions: [
        { key: 'activityId', display_name: '活动编号' },
        { key: 'orderNo', display_name: '订单号' },
        { key: 'uid', display_name: '媒体编号' },
        { key: 'extra1', display_name: '备注1' }
      ],
    }
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
     [CRUD.HOOK.beforeRefresh]() {
       return false
     },

    //跳转媒体订单
    goSubment(item){

      this.crud.toAdd();
      this.form.activityId = item.id;
      this.form.shengyuEdu = item.shengyuEdu?item.shengyuEdu:'';
      this.form.uid = this.uid;
      //this.$router.push({path:'/order/order/mlist',query:{id:item.id,orderEdu:item.shengyuEdu}});
    },

    //生成二维码
    creatQrCode(item,index){
      let idName = 'qrcode'+index;
      this.$nextTick(() => {
        document.getElementById(idName).innerHTML = '';//清除已经生成的二维码
        new QRCode(idName, {
          text: item,
          width: 200,
          height: 200,
          colorDark: '#000000',
          colorLight: '#ffffff',
          correctLevel: QRCode.CorrectLevel.H
        })
      });
    },

    //跳转
    goOPen(item){
      window.open(item)
    },

  _fenToYuan(row, col, cellValue) {
    if (typeof cellValue === 'undefined' || cellValue === null || cellValue === '') {
      return '0'
    } else {
      var num = Number(cellValue)
      if (!num) {
        return num + '.00'
      } else {
        num = Math.round((num) * 100) / 10000
        num = num.toFixed(2)
        num += ''
        var reg = num.indexOf('.') > -1 ? /(\d{1,3})(?=(?:\d{3})+\.)/g : /(\d{1,3})(?=(?:\d{3})+$)/g
        return num.replace(reg, '$1,')
      }
    }
  },

    //输入框失去焦点
    inputText(){
      this.creatQrCode(this.qrUrl);
    },

    //复制粘贴
    copyUrl(item){
      let oInput = document.createElement('input');
      oInput.value = item;
      document.body.appendChild(oInput);
      oInput.select(); // 选择对象
      document.execCommand("Copy"); // 执行浏览器复制命令
      oInput.className = 'oInput';
      oInput.style.display='none';
      this.$notify({
        title: '复制成功',
        type: 'success',
        duration: 2500
      })
    },

    //复制报单链接
    addorderUrl(item){
      console.log(item);
      let oInput = document.createElement('input');
      oInput.value = 'http://kdxt.yunduanchezhu.com/kdxt-web/#/orderadd?uid='+this.uid+'&aid='+item.id+'';
      document.body.appendChild(oInput);
      oInput.select(); // 选择对象
      document.execCommand("Copy"); // 执行浏览器复制命令
      oInput.className = 'oInput';
      oInput.style.display='none';
      this.$notify({
        title: '复制成功',
        type: 'success',
        duration: 2500
      })
    },


  },
  mounted() {
    let that = this;
    this.form.orderTime = new Date();
    this.$nextTick(() => {
      setTimeout(() => {
        let acid = window.location.href.split('?')[1].split('=')[1] ;
        let p = 0 ;
        let dataArray = sessionStorage.getItem('dataArray') ;
        if (dataArray === 'undefined' || dataArray === null || dataArray === ''){
          that.detailsList = that.crud.data.length>0?that.crud.data[0]:JSON.parse(dataArray)[0];
        }else {
          let list = JSON.parse(dataArray) ;
          for (let i = 0; i < list.length; i++) {
            if (list[i].id+'' == acid+''){
              p = i ;
            }
          }
          that.detailsList = list[p];
        }

        console.log("that.detailsList")
        console.log(that.detailsList)
        //that.detailsList.urlArray = [{url:'http://kdxt.yunduanchezhu.com/link/index.html?uid=162499485&t=1'},{url:'http://kdxt.yunduanchezhu.com/link/index.html?uid=162499485&t=1'}];//自定义了一个urlArray到时候换成真实的数据
        that.uid = sessionStorage.getItem('uid') ;
        that.$http.get("http://kdxt.yunduanchezhu.com:8083/api/activityUrl/info?page=0&size=10&sort=id%2Cdesc&activityId="+window.location.href.split('?')[1].split('=')[1]).then(function(res) {
          if (res.body.content.length > 0){
            that.qrUrl = res.body.content[0].hideUrl;
            that.ulist = res.body.content;
            let urlArray = res.body.content;
          for (let i = 0; i < urlArray.length; i++) {
            that.creatQrCode(urlArray[i].hideUrl, i)
          }
          }

        })

        let orderTime = [{ required: true, message: '订单时间不能为空', trigger: 'blur' }] ;
        if(that.detailsList.swtime === '1'){
          this.$set(this.rules,'orderTime',orderTime) ;
        }
        let orderAmt = [{ required: true, message: '订单金额不能为空', trigger: 'blur' }] ;
        if(that.detailsList.swamt === '1'){
          this.$set(this.rules,'orderAmt',orderAmt) ;
        }

        let saleAmt = [{ required: true, message: '销售金额不能为空', trigger: 'blur' }] ;
        if(that.detailsList.swshoujia === '1'){
          this.$set(this.rules,'saleAmt',saleAmt) ;
        }

        let orderCount = [{ required: true, message: '数量不能为空', trigger: 'blur' }] ;
        if(that.detailsList.swcount === '1'){
          this.$set(this.rules,'orderCount',orderCount) ;
        }


        let kddh = [{ required: true, message: '快递单号不能为空', trigger: 'blur' }] ;
        if(that.detailsList.swextra1 === '1'){
          this.$set(this.rules,'kddh',kddh) ;
        }

        let orderUname = [{ required: true, message: '微信号不能为空', trigger: 'blur' }] ;
        if(that.detailsList.swuname === '1'){
          this.$set(this.rules,'orderUname',orderUname) ;
        }

      }, 1)
    });
  }
}
</script>

<style scoped lang="scss">
*, *::before, *::after{
  box-sizing: border-box;
}
html body p{
  line-height: 1.5rem;
}
button, select{
  text-transform: none;
}
button, input{
  overflow: visible;
}
input, button, select, optgroup, textarea{
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
hr{
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 0;
  border-top: 1px solid #DFE3E7;
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}
button:not(:disabled), [type="button"]:not(:disabled), [type="reset"]:not(:disabled), [type="submit"]:not(:disabled){
  cursor: pointer;
}
a:not([href]):not([tabindex]){
  color: inherit;
  text-decoration: none;
}
.clum-md-12,.clum-12,.clum-md-10,.clum-md-3,.clum-md-9,.clum-xl-12,.clum-sm-12,.clum-lg-1,.clum-lg-11{
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}
img{
  vertical-align: middle;
  border-style: none;
}
.clum-row{
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}
.card{
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #FFFFFF;
  background-clip: border-box;
  border: 0px solid #dfe3e7;
  border-radius: 0.267rem;
  margin-bottom: 2.2rem;
  box-shadow: -8px 12px 18px 0 rgb(25 42 70 / 13%);
  transition: all .3s ease-in-out;
}
.match-height{
   margin-right: 0 !important;
}
.clum-12{
  flex: 0 0 100%;
  max-width: 100%;
}
.card-body{
  flex: 1 1 auto;
  padding: 1.7rem;
}
.card-img-top{
  width: 100%;
  border-top-left-radius: calc(0.267rem - 0px);
  border-top-right-radius: calc(0.267rem - 0px);
}
.img-fluid{
  max-width: 100%;
  height: auto;
}
.justify-content-end{
   justify-content: flex-end !important;
}
.d-flex{
  display: flex !important;
}
.form-group{
   margin-bottom: 0rem !important;
}
.position-relative{
  position: relative !important;
}
.card-header:first-child{
  border-radius: calc(0.267rem - 0px) calc(0.267rem - 0px) 0 0;
}
h4, .h4{
  font-size: 1.47rem;
  margin-bottom: 0.5rem;
  font-weight: 400;
  color: #475F7B;
}
.card-header{
  padding: 0rem 1.7rem !important;
  margin-bottom: 0;
  background-color: transparent;
  border-bottom: 0px solid #dfe3e7;
}
.mb-1, .my-1{
  margin-bottom: 1rem !important;
}
.table{
  table-layout: fixed;
  word-wrap: break-word;
  width: 100%;
  margin-bottom: 1rem;
  color: #727E8C;
  border-collapse: collapse;
  td{
    border: none;
    padding: 0.1rem 0 0.1rem 0;
    word-break: break-word;
    white-space: normal;
    vertical-align: middle;
  }
}
.tdtr{
  display: table-row;
  vertical-align: inherit;
  border-color: inherit;
}
.btn-primary.glow{
  box-shadow:0 2px 4px 0 rgb(90 141 238 / 50%) !important;
}
.btn{
  font-size: 12px !important;
  cursor: pointer;
  display: inline-block;
  font-weight: 400;
  color: #727E8C;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  background-color: transparent;
  border: 0 solid transparent;
  padding: 0.467rem 1.5rem;
  line-height: 1.6rem;
  border-radius: 0.267rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.btn-primary{
  border-color: #2c6de9 !important;
  background-color: #5A8DEE !important;
  color: #fff;
}
.mb-1, .my-1{
  margin-bottom: 1rem !important;
  margin-right: 1rem !important;
}
.card-header:first-child{
      border-radius: calc(0.267rem - 0px) calc(0.267rem - 0px) 0 0;
}
.card-header{
  padding: 0rem 1.7rem !important;
  margin-bottom: 0;
  background-color: transparent;
  border-bottom: 0px solid #dfe3e7;
}
.card .card-header ~ .card-content .card-body{
  padding-top: 0;
  flex: 1 1 auto;
  padding:0 1.7rem 1.7rem 1.7rem;
}
.card-text:last-child{
  margin-bottom: 0;
}
.card-text p{
  font-weight: bold;
  font-size: 14px;
  margin: 0px;
  padding: 0px;
  line-height: 26px;
  font-size:12px;
}
.bg-variants{
  h4{
     margin-top: 0;
  }
  .no-gutters{
    margin-right: 0;
    margin-left: 0;
  }
  .no-gutters > .clum, .no-gutters > [class*="clum-"]{
    padding-right: 0;
    padding-left: 0;
  }
  img{
    width: 200px;
    height: 200px;
    overflow: hidden;
    vertical-align: middle;
  }
}
.card-body{
  flex: 1 1 auto;
  padding: 1.7rem;
}
.mt-3, .my-3{
  margin-top: 0rem !important;
}
.mb-1, .my-1{
  margin-bottom: 1rem !important;
}
#contents{
  font-size: 18px;
  color: #34465B;
  font-weight: blod;
  height: 60px;
  border: none;
  resize: none;
  cursor: pointer;
  margin-left: -15px;
}
.card .text-ellipsis{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 0;
  margin-bottom: 1rem;
}
.d-flex{
  display: flex !important;
}

.btn-light-secondary{
  background-color: #E6EAEE;
  color: #475F7B !important;
}
@media (min-width: 768px){
  .clum-md-12{
    flex: 0 0 100%;
    max-width: 100%;
  }
  .clum-md-10{
    flex: 0 0 83.33333%;
    max-width: 83.33333%;
  }
  .clum-md-3{
    flex: 0 0 25%;
    max-width: 25%;
  }
  .clum-md-9{
    flex: 0 0 75%;
    max-width: 75%;
  }
}
@media (min-width: 1200px){
  .clum-xl-12{
    flex: 0 0 100%;
    max-width: 100%;
  }
}
@media (min-width: 992px){
  .clum-lg-1{
    flex: 0 0 8.33333%;
    max-width: 8.33333%;
  }
  .clum-lg-11{
    flex: 0 0 91.66667%;
    max-width: 91.66667%;
  }
}
@media (min-width: 576px){
  .clum-sm-12{
    flex: 0 0 100%;
    max-width: 100%;
  }
}

</style>
